<template>
	<div class="searchProduct">
		<div class="textleft">
			<select v-if="false" v-model="statusencode" class="searchselect" style="width: 70px;" @change="changeval">
				<option value="0">商品名称</option>
				<option value="1">商品编码</option>
			</select>
			<el-dropdown trigger="click" @command="handleCommand">
				<span class="el-dropdown-link" style="cursor: pointer;">
					{{this.statusencode == "0" ? "商品名称" : "商品编码"}}<i class="el-icon-arrow-down el-icon--right"></i>
				</span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item command="0">商品名称</el-dropdown-item>
					<el-dropdown-item command="1">商品编码</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
			<input type="text" v-model="encodedata" class="searchinput" />
			<img src="static/image/down-arrow.png" @click="showsearchfn($event)" class="down-icon" :class="[this.showsearch ? 'down-icon-active' : '']" />
		</div>
		<div class="textleft shaixuan" :class="[this.showsearch ? 'shaixuan-active' : '']">
			<div class="shaixuan-container">
				<div style="display: inline-block;">
					<span class="search-select-title">商品品牌</span>
					<select class="searchselect" v-model="selected1">
						<option v-for="(option,index) in optionGoodsCode1" :key="index" :value="option.id">{{option.name}}</option>
					</select>
				</div>
				<div style="display: inline-block;">
					<span class="search-select-title">一级分类</span>
					<select class="searchselect" v-model="selected2">
						<option v-for="(option,index) in optionGoodsCode2" :key="index" :value="option.classCode">{{option.className}}</option>
					</select>
				</div>
				<div style="display: inline-block;">
					<span class="search-select-title">二级分类</span>
					<select class="searchselect" v-model="selected3">
						<option v-for="(option,index) in optionGoodsCode3" :key="index" :value="option.classCode">{{option.className}}</option>
					</select>
				</div>
				<div style="display: inline-block;">
					<span class="search-select-title">三级分类</span>
					<select class="searchselect" v-model="selected4">
						<option v-for="(option,index) in optionGoodsCode4" :key="index" :value="option.classCode">{{option.className}}</option>
					</select>
				</div>
			</div>
		</div>
		<!--<search-button text="搜索" :clickEvent="searchbuttonEvent"></search-button>-->
		<table class="sv-table" style="overflow: hidden;overflow-y: scroll;margin-top: 15px;">
			<tr class="table-th">
				<th>商品名称</th>
				<th>商品编码</th>
			</tr>
			<tr class="table-tr" v-for="(item, index) in getDataArray" :key="index" @click="getgoodscode(item, index)" :class="{onclick:index==currindex}" style="cursor: pointer;">
				<td v-if="redname(item.goodsName)"><span style="display: inline-block;" v-for='(val,index) in redname(item.goodsName)' :key="index" :class="{[val.class]:true}"> {{val.text}}</span></td>
				<td v-if="!redname(item.goodsName,1)">{{item.goodsName}}</td>
				<!--{{item.goodsName}}  {{item.goodsCode}}-->
				<td v-if="redname2(item.goodsCode)"><span style="display: inline-block;" v-for='(val,index) in redname2(item.goodsCode)' :key="index" :class="{[val.class]:true}"> {{val.text}}</span></td>
				<td v-if="!redname2(item.goodsCode)">{{item.goodsCode}}</td>
			</tr>
		</table>
		<mo-paging v-if="dataArray" :page-index="currentPage" :per-pages="perPages" :total="Arraycount" :page-size="pageSize" @change="pageChange">
		</mo-paging>
		<m-toast ref="toast"></m-toast>
	</div>
</template>

<script>
	import SearchButton from "../SearchButton";
	import GrayButton from "../GrayButton";
	import pagination from "../pagination";
	import Toast from "../Toast";
	import getData from './getData';
	import brandsCode from './BrandsCode';
	import getCode from './getGoodsCode';
	import {Dropdown, DropdownMenu, DropdownItem} from "element-ui";
	export default {
		data() {
			return {
				goodscode: "",
				dataArray: [],
				statusencode: "0",
				encodedata: "",
				/*商品品牌*/
				selected1: "",
				optionGoodsCode1: [],
				/*一级运营分类*/
				selected2: "",
				optionGoodsCode2: [],
				/*二级运营分类*/
				selected3: "",
				optionGoodsCode3: [],
				/*三级运营类目*/
				selected4: "",
				optionGoodsCode4: [],
				//分页
				pageSize: 3, //每页显示20条数据
				currentPage: 1, //当前页码
				count: 0, //总记录数
				perPages: 3,
				//显示隐藏
				showsearch: false,
				//当前选中列表
				currindex:null
			}
		},
		components: {
			"search-button": SearchButton,
			"gray-button": GrayButton,
			"mo-paging": pagination,
			"m-toast": Toast,
			"el-dropdown": Dropdown,
			"el-dropdown-menu": DropdownMenu,
			"el-dropdown-item": DropdownItem,
		},
		computed: {
			getDataArray() {
				return this.dataArray;
			},
			Arraycount() {
				return this.count;
			}
		},
		watch: {
			selected1(data) {
				if(data) {
					this.searchbuttonEvent()
				}
			},
			selected2(data) {
				if(data) {
					this.getGoodsCodedata(2, data);
					this.searchbuttonEvent()
				}
			},
			selected3(data) {
				if(data) {
					this.getGoodsCodedata(3, data);
					this.searchbuttonEvent()
				}
			},
			selected4(data) {
				if(data) {
					this.searchbuttonEvent()
				}
			},
			encodedata(data) {
				if(data) {
					this.searchbuttonEvent()
				}
			}
		},
		methods: {
			//更改搜索名称或编码
			changeval(){
				this.encodedata="";
				this.dataArray = [];
			},
			handleCommand(val) {
				console.log(val);
				this.statusencode = val;
			},
			//搜索名称出来的关键字标红
			redname(name) {
				if(name.indexOf(this.encodedata) > -1 && this.statusencode == 0) {
					var text = name.split(this.encodedata)
					var array = []
					text.map((item, index) => {
						if(item) {
							array.push({
								class: 'black',
								text: item
							})
						}
						if(index < text.length - 1) {
							array.push({
								class: 'red',
								text: this.encodedata
							})
						}
					})
					return array
				} else {
					return ""
				}
			},
			//搜索编码出来的关键字标红
			redname2(code) {
				if(code.indexOf(this.encodedata) > -1 && this.statusencode == 1) {
					var text = code.split(this.encodedata)
					var array = []
					text.map((item, index) => {
						if(item) {
							array.push({
								class: 'black',
								text: item
							})
						}
						if(index < text.length - 1) {
							array.push({
								class: 'red',
								text: this.encodedata
							})
						}
					})
					return array
				} else {
					return ""
				}
			},
			//下拉搜索隐藏及初始化
			showsearchfn(event) {
				this.showsearch = !this.showsearch;
				//控制下拉图标的样式
				event.target.src = this.showsearch ? "static/image/down-arrow-active.png" : "static/image/down-arrow.png";
				//控制筛选条件框的样式
				this.shaixuanHandleClass();
				if(!this.showsearch) {
					this.selected1 = "";
					this.selected2 = "";
					this.selected3 = "";
					this.selected4 = "";
				}
			},
			//动态获取筛选条件框的高度，从而设置transition动画效果
			shaixuanHandleClass() {
				let dom = document.querySelector(".searchProduct .shaixuan");
				dom.style.height = this.showsearch ? `${document.querySelector(".searchProduct .shaixuan-container").offsetHeight}px` : "0";
			},
			//初始化搜索框
			hideModel() {
				this.dataArray = [];
				this.statusencode = 0;
				this.encodedata = "";
				this.selected1 = "";
				this.selected2 = "";
				this.selected3 = "";
				this.selected4 = "";
				this.count = 0;
			},
			//获取商品品牌
			getBrandsCode() {
				let params = {
					enterprisecode: api.enterpriseCode,
				}
				let callback = (data) => {
					if(data) {
						for(let i = 0; i < data.length; i++) {
							let obj = {};
							obj.name = data[i].brandname;
							obj.id = data[i].brandid;
							this.optionGoodsCode1.push(obj);
						}
					}
				}
				brandsCode(callback, params);
			},
			//获取分类数据
			getGoodsCodedata(level, parentId) {
				let params = {
					enterpriseCode: api.enterpriseCode,
					level: level,
					parentCode: parentId,
					storeCode: localStorage.getItem("storeCode"),
				}
				let callback = (data) => {
					if(data && level==1) {
						this.optionGoodsCode2 = data
					} else if(data && level==2) {
						this.optionGoodsCode3 = data
					}else if(data && level==3){
						this.optionGoodsCode4 = data
					}
				}
				getCode(callback, params);
			},
			//搜索
			searchbuttonEvent() {
				let params = {
					length: this.pageSize,
					pageNum: this.currentPage,
					start: (this.currentPage - 1) * this.pageSize,
					storeCode: localStorage.getItem("storeCode"),
					goodsCode: "", //商品编码
					goodsName: "", //商品名称
					status: 2,
					brandId: this.selected1, //商品品牌
					goodsClassCode: this.selected2, //一级运营分类
					goodsClassChild: this.selected3, //二级运营分类
					goodsClassThird:this.selected4,//三级运营分类
				}
				if(this.statusencode == 0) {
					params.goodsName = this.encodedata;
				} else if(this.statusencode == 1) {
					params.goodsCode = this.encodedata;
				}
				let callback = (data) => {
					this.dataArray = data.results;
					this.count = data.totalCount
					if(this.dataArray.length == 0) {
						this.$refs.toast.toast("暂无推广类型的商品数据");
					}
				}
				let errFn = (data) => {
						this.$refs.toast.toast(data);
					}
				getData(callback, params,errFn);
			},
			pageChange(page) {
				this.currentPage = page
				this.searchbuttonEvent()
			},
			getgoodscode(item,index) {
				this.currindex = index
				this.goodscode = item.goodsCode
				this.$emit('getgoodscodedata', this.goodscode)
			},
		},

		created() {

		},
		mounted() {
			this.getBrandsCode();
			this.getGoodsCodedata(1);
		},
	}
</script>

<style scoped>
	.el-dropdown {
		width: 90px;
	}
	#edit-model-box .searchProduct .searchinput {
		width: 120px;
	}
	.down-icon {
		transform: rotate(90deg);
		transition: transform 0.3s;
		cursor: pointer;
	}
	.down-icon-active {
		transform: rotate(270deg);
	}
	.search-select-title {
		display: inline-block;
		width: 90px;
	}
	
	.searchselect {
		display: inline-block;
		border: 1px solid #ddd;
		padding: 5px 5px;
		width: 120px;
		height: unset;
		/* margin-bottom: 15px; */
	}
	
	.textleft {
		text-align: left;

	}
	/* 选择附属筛选条件区域的样式 */
	.shaixuan {
		height: 0;
		overflow: hidden;
		transition: height 0.3s;
		/* display: flex; */
		/* flex-flow: row wrap; */
	}
	.shaixuan-container>div {
		margin-top: 15px;
	}
	.shaixuan-active {
		 /* height: 200px;  */
	}
	
	.searchProduct input {
		display: inline-block;
		width: 50%;
		height: auto;
		border: 1px solid #ddd;
		padding: 5px 5px;
	}
	
	.searchProduct img {
		display: inline-block;
		margin-left: 10px;
		vertical-align: middle;
		width: 15px;
	}
	
	.black {
		color: black;
	}
	
	.red {
		color: red
	}
	.table-tr.onclick{
		background-color: #FFF2B5;
	}
</style>